<template>
  <view class="public-content">
    <view class="public-title">
      {{ $t('brand.title') }}
    </view>
    <view class="brand-box">
      <view class="box-img">
        <image src="/static/img-slogan.png" mode="scaleToFill"></image>
      </view>
      <view class="box-text">
        <text>알고 계세요?</text>
        <text>은행이 조금만 바뀌어도 우리 기분이 달라진다는 사실</text>
        <text class="mx">이제 새로워진 케이뱅크와 함께 복잡했던 금융을 가깝고 편하게 만나고 매일을 기분 좋은 일상으로 만들어보세요.</text>
        <text>
          케이뱅크와 만나는 모든 순간들이 즐거움으로 이어지도록
        </text>
        <text>기분 좋은 금융생활, Kbank</text>

      </view>
    </view>

    <view class="public-title title-mt">
      {{ $t('brand.title2') }}
    </view>
    <view class="brand-box">
      <view class="box-text">
        <text>케이뱅크의 대표 로고는 브랜드의 핵심을 상징하며, 다양한 대내외 커뮤니케이션에서 최우선적으로</text>
        <text>사용하고 단독으로 표기하는 것을 원칙으로 합니다.</text>
        <text>로고의 형태가 변형되지 않도록 주의가 필요하며, 비례와 컬러 규정을 철저히 준수하여 사용해야 합니다.</text>
      </view>
      <view class="box-img logo-img">
        <image src="/static/img-logo.jpg" mode="scaleToFill"></image>
      </view>
    </view>

    <view class="public-title title-mt">
      {{ $t('brand.title3') }}
    </view>
    <view class="brand-box">
      <view class="box-text">
        <text>일관된 브랜드 아이덴티티와 명시성을 고려하여 로고 사용 시 충분한 여백을 확보해야 하며</text>
        <text>지정된 비율의 공간 안에는 어떤 디자인 요소도 포함되지 않도록 합니다.</text>
      </view>
      <view class="bg-img">
        <text>여백 확보</text>
        <view style="height: 400rpx;display: flex;justify-content: center;align-items: center;">
          <image src="/static/img-logo-guide-white-space.png" mode="aspectFit" style="width: 520rpx; height: 188rpx;">
          </image>
        </view>

      </view>
      <view class="bg-img">
        <text>최소 사이즈</text>
        <view style="height: 260rpx;display: flex;justify-content: center;align-items: center;">
          <image src="/static/img-logo-guide-minimal-size.png" mode="aspectFit" style="width: 336rpx; height: 54rpx;">
          </image>
        </view>
      </view>
    </view>

    <view class="public-title title-mt">
      파트너십 표기 규정
    </view>
    <view class="brand-box">
      <view class="box-text">
        <text>케이뱅크 로고를 파트너사 로고와 함께 표기해야 할 경우는 아래에 제시된 규정을 준수하여 표기합니다.</text>
        <text>로고의 컬러는 디자이너의 시각적 판단에 따라 배경컬러를 고려하여 사용하며, 케이뱅크 로고와 브랜드 로고는 같은 비중으로 표시합니다.</text>
      </view>
      <view class="bg-img">
        <text>로고 비율/최소 여백 확보</text>
        <view style="height: 400rpx;display: flex;justify-content: center;align-items: center;">
          <image src="/static/img-partnership-guide-1.png" mode="aspectFit" style="width: 620rpx; height: 62rpx;">
          </image>
        </view>

      </view>
      <view class="bg-img">
        <view style="height: 220rpx;display: flex;justify-content: center;align-items: center;">
          <image src="/static/img-partnership-guide-2.png" mode="aspectFit" style="width: 424rpx; height: 42rpx;">
          </image>
        </view>
      </view>
      <view class="bg-img">
        <view style="height: 220rpx;display: flex;justify-content: center;align-items: center;">
          <image src="/static/img-partnership-guide-3.png" mode="aspectFit" style="width: 320rpx; height: 46rpx;">
          </image>
        </view>
      </view>
    </view>

    <view class="public-title title-mt">
      브랜드명 사용 가이드
    </view>
    <view class="brand-box">
      <view class="box-text">
        <text>케이뱅크의 공식 명칭은 국문 ‘케이뱅크’, 영문 ‘Kbank’로 표기하되 이미지 사용이 가능한 환경이라면</text>
        <text>워드마크 로고를 사용하는 것을 원칙으로 합니다. 띄어쓰기 및 대소문자 구분에 유의하여 사용해야 합니다.</text>
      </view>
      <view class="bg-img">
        <text>로고 비율/최소 여백 확보</text>
        <view style="height: 320rpx;display: flex;justify-content: center;align-items: center;">
          <image src="/static/img-brand-name-en.png" mode="aspectFit" style="width: 620rpx; height: 62rpx;">
          </image>
        </view>
      </view>
      <view class="bg-img flex-col">
        <view style="height: 180rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
          <image src="/static/img-brand-name-en-1.png" mode="aspectFit" style="width: 202rpx; height: 62rpx;">
          </image>
          <text style="margin-top: 20rpx;">모두 대문자로 표기</text>
        </view>
        <view style="height: 180rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
          <image src="/static/img-brand-name-en-2.png" mode="aspectFit" style="width: 202rpx; height: 62rpx;">
          </image>
          <text style="margin-top: 20rpx;">모두 소문자로 표기</text>
        </view>
      </view>
      <view class="bg-img">
        <text>국문</text>
        <view style="height: 320rpx;display: flex;justify-content: center;align-items: center;">
          <image src="/static/img-brand-name-ko.png" mode="aspectFit" style="width: 620rpx; height: 62rpx;">
          </image>
        </view>
      </view>
      <view class="bg-img flex-col">
        <view style="height: 180rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
          <image src="/static/img-brand-name-ko-1.png" mode="aspectFit" style="width: 202rpx; height: 62rpx;">
          </image>
          <text style="margin-top: 20rpx;">한/영 혼합하여 표기</text>
        </view>
        <view style="height: 180rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
          <image src="/static/img-brand-name-ko-2.png" mode="aspectFit" style="width: 202rpx; height: 62rpx;">
          </image>
          <text style="margin-top: 20rpx;">띄어쓰기</text>
        </view>
      </view>

    </view>

    <!-- 缺少 -->
    <view class="public-title title-mt">
      브랜드 컬러
    </view>
    <view class="brand-box">
      <view class="box-text">
        <text>브랜드 아이덴티티를 전달하는 가장 핵심적인 요소이며 Primary Color 사용을 권장합니다.적용 매체에 따라 아이덴티티가 잘 전달될 수 있도록 배경컬러에 맞추어 가시성을 확보하여 사용해야
          합니다.</text>
      </view>
    </view>

  </view>
</template>


<script setup></script>

<style lang="scss" scoped>
.title-mt {
  margin: 140rpx 0 20rpx;
}

.brand-box {
  width: 100%;

  .box-img {
    overflow: hidden;
    margin: 20rpx 0;

    image {
      width: 100%;
      height: 470rpx;
      border-radius: 34rpx;
    }
  }

  .logo-img {
    margin-top: 34rpx;

    image {
      height: 286rpx;
    }
  }

  .bg-img {
    background: #f7f9fd;
    border-radius: 34rpx;
    padding: 30rpx;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;

    text {
      color: #2e2e2e;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .flex-col {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .box-text {
    display: flex;
    flex-direction: column;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    text-align: left;
    font-style: normal;
    text-transform: none;

    text {
      line-height: 38rpx;
    }


  }

  .mx {
    margin: 40rpx 0;
  }
}
</style>